<template>
    <div class="page">
        <div class="work-list">
            <div class="work-item" v-for="item in list" :key="item.id">
                <img :src="item.work.file" />

                <div class="btn-group">
                    <div class="btn-item" @click="onJumpWork(item)">查看作品</div>
                    <div class="btn-item" @click="onShowTicket(item)">查看门票</div>
                </div>
            </div>
        </div>
    </div>

    <LazyDialogTicketM ref="ticketDialogRef" />
</template>
<script setup>
import { useContent } from ".";

const ticketDialogRef = ref(null);
const {
    list,

    getList
} = useContent();

const onShowTicket = (item) => {
    ticketDialogRef.value.show(item.work.id);
}

const onJumpWork = (item) => {
    const url = GetWorkLink(item.work.url, item.work.templatestype_id);
    window.open(url);
}

getList();
</script>
<style lang="scss" scoped>
.work-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;

    .work-item {
        position: relative;
        width: 172.5px;
        margin-right: 10px;

        &:nth-of-type(2n) {
            margin-right: 0;
        }

        img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }

        .btn-group {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            height: 30px;
            background-color: rgba($color: #fff, $alpha: 0.8);
            backdrop-filter: blur(10px);

            .btn-item {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                height: 100%;
                color: #5085fb;
                cursor: pointer;
                font-size: 14px;
            }
        }
    }
}
</style>